<template>
  <div id="selection-table-con">
    <g-banner :title="'字典列表'" :des="'带有多选框，字典的列表，可以对数据进行批量操作'"></g-banner>
    <a-affix :target="getScrollingCon">
      <div class="g-title-con">
        <h2 class="g-main-title">字典列表</h2>
      </div>
    </a-affix>
    <div class="g-box">
      <div class="toolbar">
        <div class="g-search-simple pull-left">
          <el-input placeholder="请输入内容" v-model="search" class="g-input-width">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
          <el-popover placement="bottom" trigger="click" ref="queryPopover" @hide="queryMode = true">
            <div class="g-poper-form">
              <el-form label-width="100px">
                <div class="g-form-block-grid">
                  <el-form-item label="证书编号">
                    <el-input placeholder="请输入证书编号"></el-input>
                  </el-form-item>
                  <el-form-item label="状态">
                    <el-select placeholder="请选择状态" style="width: 100%" v-model="advancedQuery.status">
                      <el-option :value="0" label="启用"></el-option>
                      <el-option :value="1" label="禁用"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="所属区域">
                    <el-input placeholder="请输入所属区域"></el-input>
                  </el-form-item>
                </div>
                <div class="g-form-block-grid">
                  <el-form-item label="企业负责人">
                    <el-input placeholder="请输入企业负责人"></el-input>
                  </el-form-item>
                  <el-form-item label="有效期至">
                    <el-date-picker type="date" placeholder="请输入有效期至" style="width: 40%;"></el-date-picker>
                    <span style="margin: 0 10px;">至</span>
                    <el-date-picker type="date" placeholder="请输入有效期至" style="width: 40%;"></el-date-picker>
                  </el-form-item>
                </div>
              </el-form>
              <div class="button-group">
                <el-button type="primary" @click="handleAdvancedQuery">查询</el-button>
                <el-button>重置</el-button>
              </div>
            </div>
            <el-button class="g-query-mode" slot="reference" type="text" v-if="queryMode" @click="queryMode = false">
              <i class="el-icon-caret-bottom"></i><span>更多查询</span>
            </el-button>
            <el-button class="g-query-mode" slot="reference" type="text" v-else @click="queryMode = true">
              <i class="el-icon-caret-top"></i><span>精简查询</span>
            </el-button>
          </el-popover>
        </div>
        <div class="pull-right">
          <el-button type="primary" @click="handleNew">新增</el-button>
          <el-button type="primary" @click="handleEdit">修改</el-button>
          <el-button type="danger" @click="handleDelete">删除</el-button>
        </div>
        <div class="clearfix"></div>
      </div>
      <!-- <el-table :data="cosumerData" stripe style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50" align="center"></el-table-column>
        <el-table-column type="index" label="序号" width="50" align="center" v-if="columnVisible[0]"></el-table-column>
        <el-table-column label="消费者名称" header-align="center" width="220px" v-if="columnVisible[1]">
          <div slot-scope="scope" class="consumer-name">
            <img src="@/assets/img/icon-consumer.png">
            <el-button type="text" @click="handleDetail(scope.row)">{{scope.row.consumerName}}</el-button>
          </div>
        </el-table-column>
        <el-table-column label="消费者编码" prop="consumerNameCode" align="center" v-if="columnVisible[2]"></el-table-column>
        <el-table-column label="调用次数" prop="invoke" align="center" v-if="columnVisible[3]"></el-table-column>
        <el-table-column label="状态" header-align="center" width="100px" v-if="columnVisible[4]">
          <div slot-scope="scope">
            <div v-if="scope.row.status == 1">
              <div class="dot dot-green"></div>
              <span>已发布</span>
            </div>
            <div v-if="scope.row.status == 0">
              <div class="dot dot-orange"></div>
              <span>草稿</span>
            </div>
          </div>
        </el-table-column>
        <el-table-column label="是否启用" align="center" v-if="columnVisible[5]">
          <div slot-scope="scope">
            <el-switch v-model="cosumerData[scope.$index].isEnable" @change="handleEnable(scope.row)"></el-switch>
          </div>
        </el-table-column>
        <el-table-column width="50" align="right">
          <div slot="header" class="g-more-column">
            <el-dropdown trigger="click" :hide-on-click="false">
              <i class="el-icon-more"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-checkbox v-model="columnVisible[0]">序号</el-checkbox>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-checkbox v-model="columnVisible[1]">消费者名称</el-checkbox>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-checkbox v-model="columnVisible[4]">状态</el-checkbox>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-table-column>
      </el-table> -->
       <el-table :data="liss" stripe style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50" align="center"></el-table-column>
        <!-- <el-table-column type="index" label="序号" width="50" align="center"></el-table-column> -->
        <el-table-column label="消费者名称" header-align="center" width="220px">
          <div slot-scope="scope" class="consumer-name">
            <img src="@/assets/img/icon-consumer.png">
            <el-button type="text" @click="handleDetail(scope.row)">{{scope.row.consumerName}}</el-button>
          </div>
        </el-table-column>
        <el-table-column label="类型" prop="classifyName" align="center"></el-table-column>
        <!-- ****************以下是回显的第二种简单方法 ，不需要新定义一个属性classifyName*************-->
        <!-- <el-table-column label="类型" prop="classify" align="center">
          <template slot-scope="scope">
            {{dictList.filter(item=>item.value == scope.row.classify)[0].text}}
          </template>
        </el-table-column> -->
        <el-table-column label="消费者编码" prop="consumerNameCode" align="center"></el-table-column>
        <el-table-column label="调用次数" prop="invoke" align="center"></el-table-column>
        <el-table-column label="状态" header-align="center" width="100px" >
          <div slot-scope="scope">
            <div v-if="scope.row.status == 1">
              <div class="dot dot-green"></div>
              <span>已发布</span>
            </div>
            <div v-if="scope.row.status == 0">
              <div class="dot dot-orange"></div>
              <span>草稿</span>
            </div>
          </div>
        </el-table-column>
        <el-table-column label="是否启用" align="center" >
          <div slot-scope="scope">
            <el-switch v-model="liss[scope.$index].isEnable" @change="handleEnable(scope.row)"></el-switch>
          </div>
        </el-table-column>
       
      </el-table>
    </div>
    <el-pagination class="pull-right" @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="currentPage" :page-sizes="[5, 10, 25]" background :page-size="pageSize" :pager-count="5"
      layout="total, sizes, prev, pager, next, jumper" :hide-on-single-page="false" :total="total">
    </el-pagination>
    <div class="clearfix"></div>
    <!-- 新增修改对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="handlerDialogVisible" width="30%" :before-close="handleHandlerClose" class="g-dialog">
      <consumer-handler ref="consumerHandler" @load="load"></consumer-handler>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleHandlerClose">取消</el-button>
        <el-button @click="handleSubmit" type="primary">确定</el-button>
      </span>
    </el-dialog>
    <!-- 详情对话框 -->
    <el-dialog title="详情" :visible.sync="detailDialogVisible" width="40%" :before-close="handleDetailClose" class="g-dialog">
      <consumer-detail ref="consumerDetail"></consumer-detail>
    </el-dialog>
  </div>
</template>
<script>
import { getNormalTableData } from '@/api/normal-table'
import { getScrollingCon } from '@/util/common'
import ConsumerHandler from './components/consumer-handler'
import ConsumerDetail from './components/consumer-detail'
import { getDictCode } from '@/api/dict'
export default {
  data() {
    return {
      search: '',
      advancedQuery: {
        status: null,
      },
      queryMode: true,

      // 【表格】
      columnVisible: [true, true, true, true, true, true],
      cosumerData: [],
      currentPage: 1,
      pageSize: 10,
      total: 100,
      tableSelection: [],

      // 【对话框】
      handlerDialogVisible: false,
      dialogTitle: '新增',

      // 【对话框】
      detailDialogVisible: false,
      liss:[
        {classify:1,status:0,consumerName:'小名',consumerNameCode:'UXSDFJSDFJOSILNFWLEF',invoke:1,isEnable:1},
        {classify:2,status:1,consumerName:'小名',consumerNameCode:'UXSDFJSDFJOSILNFWLEF',invoke:2,isEnable:1},
        {classify:3,status:0,consumerName:'小名',consumerNameCode:'UXSDFJSDFJOSILNFWLEF',invoke:1,isEnable:1},
        {classify:4,status:1,consumerName:'小名',consumerNameCode:'UXSDFJSDFJOSILNFWLEF',invoke:3,isEnable:1},
        {classify:3,status:0,consumerName:'小名',consumerNameCode:'UXSDFJSDFJOSILNFWLEF',invoke:4,isEnable:1},
        {classify:2,status:1,consumerName:'小名',consumerNameCode:'UXSDFJSDFJOSILNFWLEF',invoke:1,isEnable:1},
      ],
      dictList:[
        {text:'网站',value:1},
        {text:'办公',value:2},
        {text:'支撑',value:3},
        {text:'业务',value:4},
      ]
    }
  },
  created() {
    this.loadNormalTableData()
    // this.getDictCodes()  
  },
  components: {
    ConsumerHandler, ConsumerDetail
  },
  methods: {
    getScrollingCon,
    getDictCodes(name,value){ //由于获取字典需要登录，所以暂时用假数据 dictList代替 value为dictCode的值DATAWAREHOUSE.SYS.CLASSIFY
      getDictCode({"dictcode":value}).then(res=>{
        if(res.data.success){
          // 建议现在data() 里定义变量name的数组
          this[name] = res.data.data.list;
          // this.loadNormalTableData();
        }
      })
      .catch(err=>{
        console.log("err",err)
      })
    },
    loadNormalTableData() {
      getNormalTableData().then((result) => {
        // this.cosumerData = result.data.list;
        //这里的liss可在实战中改成 表格的数组名，里的this.dictList 是要根据删选的数组名
        this.liss.filter(oneItem=>{   
          if(this.dictList.find(item =>item.value == oneItem.classify)!= undefined){
            let classifyName = this.dictList.find(item =>item.value == oneItem.classify).text
            this.$set(oneItem,'classifyName',classifyName)
          }
        })

        //这是第一种方法 在js里面处理，赋给自定义的新的值


        // 第二种方法 看上面的视图层 档期那classifyName的位置
      })
    },
    handleAdvancedQuery() {
      this.$refs.queryPopover.doClose()
      this.queryMode = true
    },
    handleDetail(consumerId) {

    },
    handleEnable(row) {

    },
    handleSizeChange() {

    },
    handleCurrentChange() {

    },
    handleSelectionChange(selection) {
      this.tableSelection = selection
    },
    handleEdit(row) {
      if(this.tableSelection.length == 0) {
        this.$message.warning('您需要选择一项')
        return
      }
      if(this.tableSelection.length > 1) {
        this.$message.warning('您只能选择一项')
        return
      }
      this.handlerDialogVisible = true
      this.dialogTitle = '修改'
      this.$nextTick(() => {
        this.$refs.consumerHandler.init('edit', this.tableSelection[0])
      })
    },
    handleDelete() {
      let deleteOption = ''
      if(this.tableSelection.length == 0) {
        this.$message.warning('请选择至少一项')
        return
      }
      this.tableSelection.forEach(element => {
        deleteOption += `<p>${element.consumerId}: ${element.consumerName}</p>`
      })
      this.$confirm(deleteOption, '要批量删除以下选项吗', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        // 此项不安全，不建议使用
        dangerouslyUseHTMLString: true
      }).then(()=>{
        this.$message.success('删除成功')
      }).catch(()=>{

      })
    },
    // 点击新增按钮
    handleNew() {
      this.handlerDialogVisible = true
      this.dialogTitle = '新增'
      this.$nextTick(() => {
        this.$refs.consumerHandler.init('add')
      })
    },
    // 点击名称查看详情
    handleDetail(row) {
      this.detailDialogVisible = true
      this.$nextTick(() => {
        this.$refs.consumerDetail.load(row)
      })
    },
    // 删除
    handleDelete({consumerId}) {
      this.$confirm('即将删除一条数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        this.$message.success('删除成功')
      }).catch(() => {})
    },
    // 点击提交（新增或修改）按钮
    handleSubmit() {
      this.$refs.consumerHandler.handleSubmit()
    },
    // 关闭消费者对话框
    handleHandlerClose() {
      this.handlerDialogVisible = false
    },
    // 对话框内提交成功
    load() {
      this.loadNormalTableData()
      this.handleHandlerClose()
    },
    // 关闭详情对话框
    handleDetailClose() {
      this.detailDialogVisible = false
    },
  },
}
</script>